<template>
    <div class="px-8">
        <com-filterTable
            :ref="pageConfig.key"
            class=""
            :services="pageConfig.serviceName"
            :filter-form-config="pageConfig.formConfig"
            :filterInline="false"
            :params="{
                staffId: staffId,
                ...pageConfig.params
            }"
            :filterCol="4"
            filterLabelWidth="90px"
            :table-border="true"
            :showFormFilter="true"
            :showRequestNum="false"
            :top-operation="pageConfig.topOperation"
            :table-column="pageConfig.columnConfig"
            :queryDataHandle="queryDataHandle"
            :autoLoad="false"
        />

        <com-formDialog
            ref="dialog"
            v-bind="dialogData"
            @changeOut="changeOut"
            @cancel="dialogCancelHandle"
            @submit="submitHandle"
        />
    </div>
</template>

<script>
import { OP_TYPE_CD } from "@constants";
import { formItemMap } from "@utils/formField";
import service from "@service";
import _ from "lodash";

export default {
    name: "test",
    data() {
        return {
            activeName: "tSrWorkOrderPool",
            oldFormData: null,
            comDialogData: {},
            batchSelected: [],
            pageConfig: {
                key: "tSrWorkOrderPool",
                serviceName: "tSrWorkOrderPool",
                label: "内部工单",
                params: {},
                formConfig: [
                    formItemMap.startAndEndDate.apply(this, [
                        "时间范围",
                        "startAndEndDate",
                        {
                            type: "datetimerange",
                            keyRange: ["acptStartTime", "acptEndTime"],
                        },
                    ]),
                    {key: 'wrkfmShowSwftno', label: '工单编号'},
                    formItemMap.mobile.apply(this, ["客户电话", "acptNum"]),
                    // ...formItemMap.getArea.apply(this, [{
                    //     province: {
                    //         key: 'custBelgProvCode',
                    //         label: '客户省份',
                    //     },
                    //     city: {
                    //         key: 'custBelgCityCode',
                    //         label: '客户城市',
                    //     },
                    //     area: {
                    //         key: 'custBelgDistrictCode',
                    //         label: '客户区县',
                    //     }
                    // }]),
                ],
                columnConfig: [
                    { type: "select" },
                    {
                        "value": "wrkfmShowSwftno",
                        "label": "工单编号",
                        "sortable": true,
                    },
                    {
                        "value": "prstNodeTypeCdNm",
                        "label": "流程节点",
                        "sortable": true,
                    }
                ],
                topOperation: {
                    left: [
                        {
                            name: "选中",
                            key: "add",
                            type: "primary",
                            requireArguments: ["batchSelected"],
                            handle: (batchSelected) => {
                                console.log(batchSelected, "选中的表格数据！")
                                this.comDialogData = {
                                    submitHandle: (data) => {
                                        return new Promise((resolve) => {
                                            setTimeout(resolve(true) , 1000)
                                        })
                                    },
                                    configs: [
                                        {
                                            key: 'key1',
                                            label: '输入值',
                                            required: true
                                        }
                                    ],
                                    batchSelected: batchSelected,
                                    title: "休眠",
                                    width: "750px",
                                    height: "200px",
                                    labelPosition: "left",
                                    labelWidth: "90px",
                                    col: 1,
                                };
                                this.$refs.dialog.show();
                            },
                        },
                        {
                            name: "查询表单",
                            key: "delete",
                            type: "primary",
                            requireArguments: ["filterForm"],
                            handle: (filterForm) => {
                                console.log(filterForm, "查询表单")
                            },
                        },
                    ],
                },
            },
        };
    },
    watch: {},
    computed: {
        dialogData() {
            let { comDialogData } = this;
            return {
                configs:
                    this[comDialogData.configName] || this.formDialogConfig,
                ...comDialogData,
            };
        },
        formDialogConfig() {
            return [];
        },
    },
    mounted() {},
    methods: {
        changeOut({ key, formData } = {}) {
            this.oldFormData = { ...formData };
        },
        queryDataHandle(params) {
            let temp = {
                ...params,
            };
            return temp;
        },
        loadList() {
            let ref = this.$refs[this.activeName];
            if(Array.isArray(ref)) {
                ref = ref[0];
            }

            ref && ref.filterFormQueryHandle();
        },
        dialogCancelHandle() {
            this.$refs.dialog.close();
        },
        async submitHandle(data) {
            let handle = this.dialogData.submitHandle;
            handle = typeof handle !== 'function' ? this[handle] : handle;
            if (handle) {
                let loading = await this.$store.dispatch("global/loading");
                handle(data)
                    .then((res) => {
                        loading.close();
                        this.$refs.dialog.close();
                        this.loadList();
                    })
                    .catch((e) => {
                        loading.close();
                    });
            }
        },
        // 休眠处理函数
        claimOrderHandle(data) {
            const selected = this.comDialogData.batchSelected;
            return service('sleep', {
                data: {
                    ...data,
                    "problemProcessIds":(selected||[]).map(item => item.wrkfmId).join(','),
                    "provCode": this.provCode,
                    "staffId": this.staffId,
                }
            })
        }
    },
};
</script>
